<template>
  <section id="productSoftware">
    <section :class="['sec-box min-h-screen flex-column-cc product-software', isCurrent ? 'fixed-top' : '']">
      <article class="wow fadeIn width-small text-center">
        <h2>Intuitive Software for fUS Acquisition & Analysis</h2>
        <h4 class="width gray margin-top">
          The mini-fUS system includes user-friendly software designed to streamline your experimental workflow, from data acquisition to initial analysis.
          Featuring real-time GPU-accelerated processing for immediate
        </h4>
      </article>
      <ul class="flex-cc">
        <li><img :src="imgThunderscan" /></li>
        <li><img :src="imgThunderlnsight" /><span class="tag-bottom">ThunderInsight</span></li>
      </ul>
    </section>
    <section class="sec-box h-screen flex-column-cc product-software-features">
      <div class="width-middle">
        <article>
          <h3>Key Software Features:</h3>
          <ul class="list-disc">
            <li>User-friendly graphical interface</li>
            <li>Real-time beamforming & SVD clutter filtering</li>
            <li>Comprehensive data acquisition controls</li>
            <li>Visualization tools</li>
            <li>Flexible data export options</li>
          </ul>
          <p>We are committed to continuous improvement and envision our GPU-based toolkit as a potential open-source contribution to the community.</p>
          <button class="primary margin-top">Request a Demo</button>
        </article>
        <p class="img-box"><img :src="imgThunderscan" /></p>
      </div>
    </section>
    <section class="sec-box h-screen flex-column-cc product-software-features">
      <div class="width-middle">
        <article>
          <h3>Key Software Features:</h3>
          <ul class="list-disc">
            <li>User-friendly graphical interface</li>
            <li>Date Handling & Visualization</li>
            <li>Brain Registration& Atlas Integration</li>
            <li>Functional Neuroimaging Analysis</li>
            <li>Functional Connectivity Analysis</li>
          </ul>
          <p>We are committed to continuous improvement and envision our GPU-based toolkit as a potential open-source contribution to the community.</p>
          <p class="tag-right-bottom">ThunderInsight</p>
          <button class="primary margin-top">Request a Demo</button>
        </article>
        <p class="img-box"><img :src="imgThunderlnsight" /><span class="tag-bottom">ThunderInsight</span></p>
      </div>
    </section>
  </section>
</template>
<script>
import imgThunderscan from "@images/thunderscan.png"
import imgThunderlnsight from "@images/thunderlnsight.png"

export default {
  name: "cmpts-product-software",
  data() {
    return {
      imgThunderscan,
      imgThunderlnsight,
    }
  },
  computed: {
    isCurrent() {
      return (this.$store.state.currentRoute || "").split("_")[1] === "software"
    },
  },
}
</script>
<style lang="less" scoped>
.images-box {
  width: 32rem;
}
.list-disc {
  margin: 0.8rem 0 2.4rem;
  padding-left: 1.6rem;
  li {
    list-style: disc;
    line-height: 2.2rem;
  }
}
.product-software {
  &.fixed-top {
    padding-top: 12.4rem;
  }
  & > article,
  & > ul {
    flex: none;
  }
  & > ul {
    margin: 6rem -1.6rem 0;
    max-width: 1000px;
    width: 80%;
    & > li {
      overflow: hidden;
      position: relative;
      margin: 0 1.6rem;
      width: 36rem;
      height: 36rem;
      border: 1px solid #ddd;
      img {
        width: 100%;
      }
    }
  }
}
.product-software-features {
  padding: 0 10rem 0 3.6rem;
  & > div {
    display: flex;
    justify-content: space-between;
    article {
      flex: none;
      margin-right: 10%;
      width: 50%;
    }
    .img-box {
      flex: none;
      overflow: hidden;
      position: relative;
      width: 30rem;
      height: 30rem;
    }
  }
  .img-box {
    img {
      width: 100%;
    }
  }
}
.tag-bottom {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
}
</style>
